<script setup>
import router from "../../../router/index.js";
import MyNav from "../../../components/MyNav.vue";
import MyForm from "../../../components/MyForm.vue";
import MyUploader from "../../../components/MyUploader.vue";
import {MINIO_AVATAR, RULE} from "../../../const/index.js";
import {reactive, ref} from "vue";
import {updateApi} from "../../../util/axios.js";
import {UPLOAD_AVATAR_URL} from "../../../api/ums/user.js";
import {GENDER_OPTIONS, ZODIAC_OPTIONS} from "../../../const/project.js";

// 获取当前用户记录
let user = JSON.parse(sessionStorage.getItem('row'));
let avatarUrl = ref(MINIO_AVATAR(user['avatar']));

/* ==================== 页面常量 ==================== */

// 路径导航
const navItems = [
  {icon: 'User', label: '用户管理'},
  {icon: 'User', label: '用户列表', url: '/User'},
  {icon: 'Edit', label: '修改用户信息'},
];

/* ==================== 修改基本信息 ==================== */

// 表单项 + 表单值 + 表单规则
let updateFormItems = ref([
  {label: '登录账号', prop: 'username', disabled: true},
  {label: '真实姓名', prop: 'realname', disabled: true},
  {label: '手机号码', prop: 'phone', disabled: true},
  {label: '身份证号', prop: 'idcard', disabled: true},
  {label: '用户昵称', prop: 'nickname', span: 12},
  {label: '电子邮件', prop: 'email', span: 12},
  {label: '用户性别', prop: 'gender', span: 12, type: 'select', options: GENDER_OPTIONS},
  {label: '用户年龄', prop: 'age', span: 12, type: 'number'},
  {label: '用户星座', prop: 'zodiac', span: 12, type: 'select', options: ZODIAC_OPTIONS},
  {label: '用户省份', prop: 'province', span: 12},
  {label: '用户描述', prop: 'info', type: 'textarea', rows: 7},
]);
let updateFormData = reactive(user);
let updateFormRules = {
  nickname: RULE.NICKNAME,
  email: RULE.EMAIL,
  zodiac: RULE.ZODIAC,
  province: RULE.PROVINCE,
  info: RULE.INFO,
};

/**
 * 修改成功后调用
 *
 * 1. 路由到 User 页面
 */
function updateSuccess() {
  router.push('/User');
}

/**
 * 上传头像成功后调用
 *
 * 1. 更新头像 URL
 */
function uploadAvatarSuccess(data) {

  avatarUrl.value = MINIO_AVATAR(data);
}
</script>

<template>
  <my-nav :items="navItems"/>
  <el-divider/>
  <div class="user-update-body">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="user-info-card">
          <el-image class="avatar-image" :src="avatarUrl"/>
          <h2 class="nickname">{{ user['nickname'] }}</h2>
        </el-card>
        <el-card class="upload-avatar-card" header="上传个人头像">
          <my-uploader name="avatarFile"
                       :url="UPLOAD_AVATAR_URL + user['id']"
                       :showFileList="false"
                       :autoUpload="true"
                       :callback="uploadAvatarSuccess"/>
        </el-card>
      </el-col>
      <el-col :span="16">
        <el-card class="update-card" header="修改基本信息">
          <my-form type="update"
                   :items="updateFormItems"
                   :rules="updateFormRules"
                   :args="{module: 'user'}"
                   :api="updateApi"
                   :params="updateFormData"
                   :callback="updateSuccess"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped lang="scss">
.user-update-body {
  width: 90%; // 宽度
  margin: 20px auto 0; // 外边距

  .user-info-card {
    text-align: center; // 内容居中

    .nickname {
      margin-bottom: 5px; // 下边距
    }

    .avatar-image {
      height: 170px; // 高度
    }
  }

  .upload-avatar-card {
    margin-top: 20px; // 上外边距
  }
}
</style>